<template>
  <div style="height: 100vh;width: 100vw">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
//加载ol自带样式
import Map from "ol/map";
import TileLayer from "ol/layer/tile";
import XYZ from "ol/source/xyz";
import View from "ol/view";
import Overlay from "ol/overlay";
import Feature from "ol/feature";
import Polygon from "ol/geom/polygon";
import Vector from "ol/layer/vector";
import VectorSource from "ol/source/vector";
import mapStyle from './js/mapStyle';
import Point from "ol/geom/point";
import LineString from "ol/geom/linestring";
import click from "ol/events/condition";
import Select from "ol/interaction/select";
import Sphere from "ol/sphere";
import * as PlotUtils from "../../../Utils/utils";
import Circle from "ol/geom/circle";
import proj from "ol/proj";


export default {
  data(){
    return {
      map: null,
      areaLayer: null,  //区域
      pointLayer: null, //点
      trailLayer: null,  //轨迹
      pointInfo: {},   //鼠标点击点信息
      hoverPointInfo: {},  //鼠标移入点信息
      drawLayer: null,   //绘图的轨迹
      pointTempLayer: null,  //绘制轨迹时添加的临时点
      isDraw: false,  //是否正在绘制
      isDelete: false, //是否在删除
      clickPoints: [],  //绘制时暂存的点
      tempLine: null,  //临时边
      tempPoint: null,  //临时点
      drawType: '',    //地图绘制类型
    }
  },
  mounted() {
    this.initMap()

    setTimeout(() => {
      this.addHitArea(8000,1500)
    },2000)
  },
  methods: {
    //初始化地图
    initMap(){
      this.map = null
      this.layer = null
      this.pointLayer = null
      this.trailLayer = null
      // 图层
      this.layer = new TileLayer({
        source: new XYZ({
          visible: true,
          url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8',
          wrapX: true,
        }),
      })
      //区域
      this.areaLayer = new Vector({
        source: new VectorSource(),
      })

      //点
      this.pointLayer = new Vector({
        source: new VectorSource(),
      })

      let view = new View({
        center: proj.fromLonLat([135.403218, 30.92372]),
        zoom: 4,
        maxZoom: 11,
        minZoom: 2,
        constrainResolution: true,  // 设置缩放级别为整数
        smoothResolutionConstraint: false,  // 关闭无级缩放地图
      })


      // 初始化地图到指定DOM元素
      this.map = new Map({
        layers: [this.layer,this.areaLayer,  this.pointLayer],
        target: "map",
        view
      })

    },

    //打击范围
    addHitArea(){
      // 创建圆形几何图形
      const circleGeometry = new Circle(
          proj.fromLonLat([116.404, 39.915]), // 圆心坐标
          8000 * 1000 // 半径(米)
      );
      console.log(JSON.stringify(circleGeometry))
      // 创建要素并设置样式
      const circleFeature = new Feature({
        geometry: circleGeometry,
        name: 'My Circle'
      });
      console.log(circleFeature)
      circleFeature.setStyle(mapStyle.redAreaStyle);

      this.areaLayer.getSource().addFeature(circleFeature)


      this.addPoint(
          {
            id: 10,
            type: 'red',
            coords: proj.fromLonLat([116.404, 39.915]),
          },)
    },
    addPoint(data){
      let point = new Point(data.coords)
      let pointFeature = new Feature({
        geometry: point,
        ...data
      })
      pointFeature.setStyle(mapStyle.pointRed)
      this.pointLayer.getSource().addFeature(pointFeature)
    }
  }
}
</script>

<style scoped>
#map{
  height: calc(100% - 80px);
  width: 100%;
}
#overPlay{
  padding:  5px 10px;
  background-color: rgba(8, 10, 16, 0.6);
}
.overPlayText{
  font-size: 12px;
  color: white;
  max-width: 200px;
}
</style>